<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <include file="./Public/weui2.0/__head.html"/>
        <link href="__PUBLIC__/css/exercise.css" type="text/css" rel="stylesheet"/>
        <link rel="stylesheet" href="__PUBLIC__/css/style.css">
        <link rel="stylesheet" href="__PUBLIC__/css/pages.css">
        <script src="__PUBLIC__/font/iconfont.js"></script>
        <style type="text/css">
            .bar {padding: 0; padding: 0 20px; background-color:#fbf9fe; color: #476777; }
            .title {background-color:#fbf9fe; color: #476777;}
            .bar .icon {margin: 10px 0; padding: 0; }
            .weui-dialog__btn {color: #4bc2ff;}
            /*.icon {width: 20px; height: 20px}*/
            .weui-badge{background-color: #cc99cc;}
        </style>
    </head>
    <body>
        <header class="bar bar-nav">
            <div class="title">{$examItem.seqid}/{$quesList|count=###}</div>
            <a href="javascript:leave_exam();" class="pull-left"><svg class="icon icon-left .icon-title" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-fanhui"></use></svg></a>
            <a href="javascript:;" class="pull-right open-popup" data-target="#half"><svg class="icon icon-left .icon-title" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-all"></use></svg></a>
        </header>
    
        <div class="content">
            <div class="c-pic"><span class="weui-badge" style="margin-right: 5px;">{$quesItem.type}</span>{$quesItem.contents}</div>
            <!-- <img class="c-pic" src="__PUBLIC__/images/pic.jpg"> -->
            <div class="c-table">
                <!-- option exit -->
                <if condition="$quesItem.option_a neq ''">
                    <a href="javascript:;">
                        <div class="option-area" id="option-a">
                            <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-a"></use></svg></span>
                            <lable class="option-contents">{$quesItem.option_a}</lable>
                        </div>
                    </a>
                </if>

                <if condition="$quesItem.option_b neq ''">
                    <a href="javascript:;">
                        <div class="option-area" id="option-b">
                            <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-b"></use></svg></span>
                            <lable class="option-contents">{$quesItem.option_b}</lable>
                        </div>
                    </a>
                </if>

                <if condition="$quesItem.option_c neq ''">
                    <a href="javascript:;">
                        <div class="option-area" id="option-c">
                            <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-c"></use></svg></span>
                            <lable class="option-contents">{$quesItem.option_c}</lable>
                        </div>
                    </a>
                </if>

                <if condition="$quesItem.option_d neq ''">
                    <a href="javascript:;">
                        <div class="option-area" id="option-d">
                            <span><svg class="icon" aria-hidden="true"><use xmlns:xlink="" xlink:href="#icon-option-d"></use></svg></span>
                            <lable class="option-contents">{$quesItem.option_d}</lable>
                        </div>
                    </a>
                </if>
                
            </div>
                
            <if condition="$examItem['seqid'] eq count($quesList)">
                <a class="c-button" id="submit">提交</a>
            <else /> 
                <a class="c-button" id="next_ques" href="javascript:;">下一题</a>
            </if>
        </div>

        <div class='demos-content-padded'></div>

        <div id="half" class='weui-popup__container popup-bottom'>
            <div class="weui-popup__overlay"></div>
            <div class="weui-popup__modal">
                <div class="toolbar">
                    <div class="toolbar-inner" >
                       <div class="helf-title">模拟考试</div>                       
                    </div>
                    
                </div>
                <div class="modal-content" style="height: auto; max-height: 400px; color: #000;">

                    <volist name="quesList" id="quesList" key="k" >
                        <if condition="($k)%7 eq 1">
                            <div class="weui-flex">
                                <a class="weui-flex__item" href="{:U('Exam/exam',array('selectid'=>$quesList['id']))}"><div class="{$quesList.result|get_exam_index_css=###}">{$k}</div></a>
                        <elseif condition="($k)%7 eq 0"/>
                            <a class="weui-flex__item" href="{:U('Exam/exam',array('selectid'=>$quesList['id']))}"><div class="{$quesList.result|get_exam_index_css=###}">{$k}</div></a>
                                </div>
                        <else /> 
                            <a class="weui-flex__item" href="{:U('Exam/exam',array('selectid'=>$quesList['id']))}"><div class="{$quesList.result|get_exam_index_css=###}">{$k}</div></a>
                        </if>
                    </volist>
                   

                </div>
            </div>
        </div>
    </body>
</html>

<include file="./Public/weui2.0/__foot.html"/>
<script type="text/javascript" src="__PUBLIC__/js/countdown.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        // 初始化 ABCD四个选项的点击次数 和 索引关系
        // var click_times = {'A':0, 'B':0, 'C':0, 'D':0};
        var click_index = {'A':2, 'B':3, 'C':4, 'D':5};
        var selectOption = "";
        var useList   = $('.content').find('use');

        // 定时
        function time(){
            countdown({$end_time});
        }
        setInterval(time,1000);



        // 初始化如果用户已经选择了答案
        if ("{$examItem.result}" != '-1') {
            var option = "{$examItem.answer}".toLowerCase();
            if (option!='') {
                var useList   = $('.content').find('use');
                for (var i = 0; i < useList.length ; i++) {
                    if (option.indexOf(useList[i].getAttribute('xlink:href').substring(13,14)) != '-1') {
                        useList[i].setAttribute('xlink:href', useList[i].getAttribute('xlink:href') + '-select')
                    }
                }    
            }
        } 

        // 点击选项后上传答案
        $('.option-area').click(function(){


            var use       = $(this).find('use')[0];
            var icon_attr = use.getAttribute('xlink:href');
            selectOption = "";
            // var option    = icon_attr.substring(13,14).toUpperCase(); //选项

            //判断是否选中并加上样式

            if(icon_attr.indexOf('select') != '-1') {
                use.setAttribute('xlink:href', icon_attr.substring(0,14));
            } else {
                use.setAttribute('xlink:href', icon_attr + '-select');
            }
            for (var i = 0; i < useList.length ; i++) {
                if (useList[i].getAttribute('xlink:href').indexOf('select') != '-1')
                    selectOption += useList[i].getAttribute('xlink:href').substring(13,14).toUpperCase();
            }

            var data = {
                'selectid': "{$examItem['id']}" , 
                'option': selectOption,
            }
            var url = "{:U('Exam/submit')}";
            $.post(url, data, function(res){
                // returnInfo(res);
                if(res.is_on == 0) {
                    $.alert("本次考试还未开启！", "提示");
                    return;
                }
                
                // 已开启，已提交，已结束
                if(res.is_submit == 1 && res.is_end == 1) {
                    $.alert("本次考试已经结束，你成功提交！", "提示");
                    return;
                }
                // 考试倒计时已经结束
                if(res.time_end == 1 && res.is_submit == 0) {
                    alert("本次考试时间已到，请点击确定提交试卷！！");
                    window.location.href="{:U('Exam/tip')}";
                    return ;
                }
                // 已开启，未提交，已结束
                if(res.is_submit == 0 && res.is_end == 1) {
                    alert("本次考试已经结束！！");
                    window.location.href="{:U('Exam/tip')}";
                    return;
                }
            });
        });


        // 点击下一题按钮
        $('#next_ques').click(function(){
            if (selectOption.length < 2){
                $.alert("多选题至少选择2个答案！", "提示");
            }else{
                window.location.href="{:U('Exam/exam', array('selectid'=>$examItem['id']+1))}";
            }

        });

        // 点击后monup
        $(document).on("click", ".weui-popup-modal", function() {
            console.log("open popup");
        }).on("close", ".weui-popup-modal", function() {
            console.log("close popup");
        });

         // 点击提交按钮
        $('#submit').click(function(){

            $.confirm("只有一次提交机会，你确定要提交吗?", "确认提交?", function() {
                window.location.href="{:U('Exam/tip')}";
            }, function() {
              //取消操作
            });
        });

    });

    // 离开考试页面
    function leave_exam() {
        $.confirm("您确定要中途离开本次考试嘛?", "确认离开?", function() {
            window.location.href="{:U('Exam/listExam')}";
        }, function() {
          //取消操作
        });
    };
</script>
